{% load staticfiles %}
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="author" content="Tan Jinbin">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>XMU - Omegle</title>
        
        <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet"/>
        <link href="{% static 'css/base.css' %}" rel="stylesheet"/>
        <link href="{% static 'css/main.css' %}" rel="stylesheet"/>
        <script src="{% static 'js/jquery-3.1.0.min.js' %}"></script>
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
    </head>
    <body>
        <div class="wrapper">
            <div class="side">
                <div class="banner" >
                <button id="backBtn" class="btn btn-default"></button>
                <button id="profileBtn" class="btn btn-default"></button>
                </div>
                <div class="sideMain">
                    <div id="chatPartnerImg"></div>
                    <div id="chatPartnerName"></div>
                    <div id="otherInfo"></div>
                </div>
                <div class="bottomBanner">
                    <ul>
                    <li><button>功能1</button></li>
                    <li><button>功能2</button></li>
                    <li><button>功能3</button></li>
                    </ul>
                </div>
            </div>
            <div id="mainWindow">
                <div class="banner"></div>
                <div id="historyMsg"></div>
                <!--control bar-->
                <div id="controls" >
                    <div class="items">
                    <input id="colorStyle" type="color" placeHolder="" title="fontColor" class="toolbarBtn1" />
                    <input id="emoji" type="button" value="" title="emoji" class="toolbarBtn"/>
                    <label for="sendImage" class="imageLable">
                        <input id="imageBtn" type="button" value=""  class="toolbarBtn"/>
                        <input id="sendImage" type="file" value="image" class="toolbarBtn"/>
                    </label> 
                    <input id="clearBtn" type="button" value="" title="clear screen" class="toolbarBtn"/>
                    </div>
                    <textarea id="messageInput" placeHolder="enter to send"></textarea>
                    <input id="sendBtn" type="button" value="SEND">
                    <div id="emojiWrapper"></div>
                </div>
            </div><!-- mainWindow end -->
        </div>
        
        <footer>
            <small><a href="http://git.oschina.net/jky768/Network">项目库</a> | <a href="https://git.oschina.net/dementia/Network/blob/master/ReqDoc.md">需求文档</a></small>
        </footer>
        <script src="{% static 'js/jquery-3.1.0.min.js' %}" type="text/javascript"></script>
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
        <script src="{% static 'js/main.js' %}"></script>
    </body>
</html>
